<template>
	<Layout class="content-layout">
		<Breadcrumb style="margin:24px 0">
			<BreadcrumbItem>首页</BreadcrumbItem>
			<BreadcrumbItem v-for="item in breadcrumbs" :key="item.name" :to="{name: item.to}">{{item.name}}</BreadcrumbItem>
		</Breadcrumb>
		<Form inline>
			<slot name="formInline"></slot>
		</Form>
		<Content ref="content" class="main-content">
			<slot :height="height"></slot>
		</Content>
	</Layout>
</template>

<script language="JavaScript">
	export default {
		props: {
			breadcrumbs: {
				type: Array,
				default() {
					return [{name: '测试', to: ''}]
				}
			}
		},
		data() {
			return {
				height: 0 // content高度
			};
		},
		mounted: function() {
			this.$nextTick(() => {
				this.height = this.$refs['content'].$el.clientHeight;
				// 表格高度也可以这样：window.innerHeight - this.$refs.table.$el.offsetTop - 160;
			});
		},
		methods: {}
	};
</script>

<style lang="scss" scoped>
	.content-layout {
		padding: 0 24px 24px;
		height: 100%;
		overflow: hidden;

		.main-content {
			padding: 0px;
			height: 100%;
			overflow: hidden;
		}
	}
</style>
